<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title></title>
	<link rel='stylesheet' type='text/css' href='css/jquery-ui.css' />
	<link rel='stylesheet' type='text/css' href='plugin/datepicker/css/datepicker.css' />
<link rel='stylesheet' type='text/css' href='plugin/datepicker/css/jquery-ui-timepicker-addon.css' />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type='text/javascript' src='js/jquery-ui.min.js'></script>
<script type='text/javascript' src='plugin/datepicker/jquery-ui-timepicker-addon.js'></script>
<script type='text/javascript' src='plugin/datepicker/jquery.ui.datepicker-zh-CN.js.js' charset="gb2312"></script>
<script type='text/javascript' src='plugin/datepicker/jquery-ui-timepicker-zh-CN.js'></script>
<script type="text/javascript">
	jQuery(function () {
            // 时间设置
            jQuery('#start').datetimepicker({
                timeFormat: "",
                showHour:false,
                showMinute:false,
				showTime:false,
				showButtonPanel:false,
                dateFormat: "yy-mm-dd"
            });
            jQuery('#end').datetimepicker({
                timeFormat: "",
                showHour:false,
                showMinute:false,
				showTime:false,
				showButtonPanel:false,
                dateFormat: "yy-mm-dd"
            });
            jQuery('#remindTime').datetimepicker({             
				showButtonPanel:false,
            });

        });
	 function   changetxt()  
          {  
                 var checkbox = document.getElementById("notice"); 
                  if(checkbox.checked) {
                  		document.getElementById("showtxt").style.display='block';	
                  }else {
                  		document.getElementById("showtxt").style.display='none';
                  }                                                                  
          } 
</script>
	<style>
		html, body { border:none 0; }
		input, button, textarea, select { *font-size: 100%;
		}
		input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; }
		body { font-size:75%; color:#666; font-family:'Microsoft Yahei', Tahoma, Arial!important; font-family:'宋体', Tahoma, Arial; text-align:center; }
		#form { padding-top:0px; }
		#form p { padding:0px;  }
		#form input { width:188px; padding:4px; border:1px solid #CCC; }
		#form select { width: 188px; padding:4px;border:1px solid #CCC;  }
		#form input:focus { border-color:#426DC9; }
		#form textarea {width:188px;padding:4px; border:1px solid #CCC;}
		#form select:focus { border-color:#426DC9; }
		#form textarea:focus { border-color:#426DC9; }
		#form #notice {width:3em;  border:1px solid #CCC;}


.labelBox {
        /*margin-bottom: 20px;*/
        background: -webkit-linear-gradient(19% 75% 90deg,#3095C7, #14539C); 
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#14539C), to(#3095C7));
        background: -moz-linear-gradient(19% 75% 90deg,#3095C7, #14539C); 
        background: -ms-linear-gradient(19% 75% 90deg,#3095C7, #14539C); 
        background: -o-linear-gradient(19% 75% 90deg,#3095C7, #14539C); 
        background: linear-gradient(19% 75% 90deg,#3095C7, #14539C); 
        border-radius: 4px;
        border: 1px solid #555555;
        width: 80px;
        position: relative;
        height: 32px;
}

.labelBox::before,
.labelBox::after {
        content:"ON";
        padding-left: 9px;
        line-height: 32px;
        color: #fff;
        font-size: 14px;
        text-shadow: #093b5c 0 -1px 1px;
}
.labelBox::after {
        content:"OFF";
        padding-left: 12px;
}
.check { 
        display: block;
        width: 40px;
        height: 30px;
        border-radius: 3px;
        background: #fff -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A1A1A1), to(#FFFFFF));
        background: -webkit-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
        background: -moz-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
        background: -ms-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
        background: -o-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
        background: -moz-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
        border: 1px solid #e5e5e5;
        position: absolute;
        top: 0px;
        left: 0px;
}
input[type=checkbox] {
        border: 0 none !important;
        clip: rect(1px,1px,1px,1px);
        height: 1px !important;
        overflow: hidden !important;
        position: absolute !important;
        width: 1px !important;
}

@-webkit-keyframes labelON {
        0% {
                top: 0px;
    left: 0px;
        }
        
        100% { 
                top: 0px;
    left: 38px;
        }
}

@-moz-keyframes labelON {
        0% {
                top: 0px;
    left: 0px;
        }        
        100% { 
                top: 0px;
    left: 38px;
        }
}
@-o-keyframes labelON {
        0% {
                top: 0px;
    left: 0px;
        }
        
        100% { 
                top: 0px;
    left: 38px;
        }
}

@-ms-keyframes labelON {
        0% {
                top: 0px;
    left: 0px;
        }        
        100% { 
                top: 0px;
    left: 38px;
        }
}

@keyframes labelON {
        0% {
                top: 0px;
    left: 0px;
        }        
        100% { 
                top: 0px;
    left: 38px;
        }
}
@-webkit-keyframes labelOFF {
        0% {
                top: 0px;
    left: 38px;
        }
        
        100% { 
                top: 0px;
    left: 0px;
        }
}
@-moz-keyframes labelOFF {
        0% {
                top: 0px;
    left: 38px;
        }
        
        100% { 
                top: 0px;
    left: 0px;
        }
}
@-o-keyframes labelOFF {
        0% {
                top: 0px;
    left: 38px;
        }
        
        100% { 
                top: 0px;
    left: 0px;
        }
}
@-ms-keyframes labelOFF {
        0% {
                top: 0px;
    left: 38px;
        }
        
        100% { 
                top: 0px;
    left: 0px;
        }
}
@keyframes labelOFF {
        0% {
                top: 0px;
           left: 38px;
        }
        
        100% { 
                top: 0px;
           left: 0px;
        }
}
input[type=checkbox]:checked + label.check {
        top: 0px;
        left: 38px;        
        -webkit-animation: labelON 0.2s ease-in 0s 1;
        -moz-animation: labelON 0.2s ease-in 0s 1;
        -o-animation: labelON 0.2s ease-in 0s 1;
        -ms-animation: labelON 0.2s ease-in 0s 1;
        animation: labelON 0.2s ease-in 0s 1;
  box-shadow: #244766 -1px 0px 3px;
}

input[type=checkbox] + label.check {
        top: 0px;
        left: 0px;
        -webkit-animation: labelOFF 0.2s ease-in 0s 1;
        -moz-animation: labelOFF 0.2s ease-in 0s 1;
        -o-animation: labelOFF 0.2s ease-in 0s 1;
        -ms-animation: labelOFF 0.2s ease-in 0s 1;
        animation: labelOFF 0.2s ease-in 0s 1;
        box-shadow: #244766 1px 0px 3px;                
}
label.info {
        position: absolute;
        top:0px;
        /*left: 100px;*/
        line-height: 32px;
        width: 200px;
}
	</style>
</head>
<body>
	<form id="form">
		<p><label>标题：<input id="title" type="text"></label></p>
		<p><label>日志：<textarea rows="5" id="description"></textarea></label></p>
		<p><label>开始：<input type="text" id="start" /></label></p>
		<p><label>结束：<input type="text" id ="end"/></label></p>	
		<p><label>颜色：</label>
			<select id="color">
						<option value="red">红色</option>
						<option value="blue">蓝色</option>
						<option value="green" selected="selected">绿色</option>
						<option value="orange">橙色</option>
						<option value="Indigo">靛青</option>
						<option value="Black">纯黑</option>
						<option value="Olive">橄榄色</option>
						<option value="DarkSlateGray">深灰色</option>
			</select>
		</p>
		<div style="position:absolute;left: 50%;margin-left: -110px;">
			<div class="labelBox">
		    <label for="notice" class="info">开启短信通知</label>  
		    <input type="checkbox" value="1" id="notice" onclick="changetxt()"name="notice"  />              
		    <label for="notice" class="check"></label>   
		 </div>		
		<p><label><div style="display:none;" id="showtxt">
		<input type="text" id = "remindTime" placeholder="短信提醒时间"/></div></label></p>
	</form>
</body>

</html>
